<template>
  <div class="contents">
    <el-row :gutter="10" type="flex" align="middle">
      <el-col :span="6">
        <el-select placeholder="活动状态">
          <el-option
            v-for="item in opt1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select placeholder="客户类型">
          <el-option
            v-for="item in opt1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-date-picker
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 180px"
        ></el-date-picker>
      </el-col>
      <el-col :span="1" style="text-align: center">
        <span @click="togglePane">
          <el-image
            v-if="paneShow"
            style="width: 20px; height: 20px"
            :src="require('../../assets/up.png')"
          ></el-image>
          <el-image
            v-else
            style="width: 20px; height: 20px"
            :src="require('../../assets/down.png')"
          ></el-image>
        </span>
      </el-col>
      <el-col style="text-align: right">
        <el-button type="primary" icon="el-icon-plus" @click="GoToAdd">
          新增
        </el-button>
      </el-col>
    </el-row>
    <el-row v-show="paneShow" style="margin-top: 10px">
      <el-col :span="4">
        <el-input placeholder="请输入活动名称">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table
      :data="table1"
      style="width: 100%; margin-top: 10px"
      class="one"
    >
      <el-table-column prop="name" label="活动名称" width="150"></el-table-column>
      <el-table-column prop="" label="活动时间" show-overflow-tooltip width="150">
        <template slot-scope="scope">
          <div class="line-limit-length">
            {{ scope.row.startTime }}到{{ scope.row.endTime }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="活动规则" width="130">
        <template slot-scope="scope">
          <p
            v-for="item in scope.row.marketingFullMinusRuleList"
            :key="item.id"
            style="
              width: 70px;
              color: rgb(255, 255, 255);
              background: rgb(255, 153, 0);
              display: flex;
            "
          >
            满{{ item.fullPrice }}减{{ item.reducePrice }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="状态"  width="120">
        <template slot-scope="scope">
          <!-- 利用三目判断三个条件-->
          {{ scope.row.state == 0 ? '已关闭' : scope.row.state == 1?'进行中' : '未开始' }}
        </template>
      </el-table-column>
      <el-table-column label="活动类型"  width="130">
        <template slot-scope="scope">
          {{ scope.row.type === 0 ? '满减' : '满赠' }}
        </template>
      </el-table-column>
      <el-table-column prop="ctime" label="活动创建时间" width="150"></el-table-column>
      <el-table-column prop="closeUser" label="关闭人" width="120"></el-table-column>
      <el-table-column label="关闭时间" prop="closeTimes" width="150"></el-table-column>
      <el-table-column label="操作"  width="200">
         <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            @click="copyRow(scope.$index, scope.row)"
          >
            复制
          </el-button>
           <el-button
            size="small"
            type="text"
            @click="detailRow(scope.$index, scope.row)"
          >
            详情
          </el-button>
           <el-button
            size="small"
            type="text"
            @click="editRow(scope.$index, scope.row)"
            v-if="scope.row.state == 2 ? true : scope.row.state == 1 ? false :scope.row.state == 0 ? false : ''"
          >
            编辑
          </el-button>
           <el-button
            size="small"
            type="text"
            @click="closeRow(scope.$index, scope.row)"
            v-if="scope.row.state !== 0 ? true : false"
          >
            关闭
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, prev, pager, next,sizes, jumper"
      :page-sizes="[10, 20, 30, 40]"
      style="text-align: left"
      :current-page="dataFilter.pageSize"
      :total="total"
      :page-size="dataFilter.pages"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getList, edit, del, add } from '@/api/marketing/fullDecrease'
export default {
  data() {
    return {
      table1: [],
      dataFilter: {
        current: 1,
        pagesize: 10,
      },
      opt1: [
        // {label:'a',
        // value:a
        // }
      ],
      paneShow: false,
      total:null,
    }
  },
  created() {
    this.paggingQuery()
  },
  methods: {
    //getList。
    async paggingQuery() {
      const res = await getList(this.dataFilter)
      console.log(res, 'getListData')
      this.table1 = res.list
      this.total = res.total
    },

    //add

    //优惠卷新增按钮。
    GoToAdd() {
      this.$router.push({
        path: '/market/campaign/fullDecreaseAdd',
        // query: { flag: 'add', showSubmit: true },
      })
    },
    detailRow(){},
    copyRow(){},
    editRow(){},
    closeRow(){},
    //分页点击事件。
    handleSizeChange(val) {
      this.dataFilter.pagesize = val
      this.paggingQuery()
    },
    //分页点击事件。
    handleCurrentChange(val) {
      this.dataFilter.current = val
      this.paggingQuery()
    },
    togglePane() {
      this.paneShow = !this.paneShow
    },
  },
}
</script>

<style lang="scss" scoped>
.contents {
  padding: 10px 20px;
}
.line-limit-length {
  width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
}
</style>
